<script src="vue.js"></script>
<link rel="stylesheet" href="/bootstrap-..-dist/css/bootstrap.css">
<script src="vue-resource-develop/dist/vue-resource.js"></script>

<div id="app">
    <!--查询区域-->
    <div id="select">
        <label>角色名称</label> 
        <input type="text" id="cord" v-model="cord" />
        <button value="查询" @click="sel">查询</button>
    </div> 
    <!-- 功能区域 --> 
    <div id="opter"> 
         <button value="新增" @click="add">新增</button> 
    </div> 
    <!-- 列表区域 --> 
    <table class="table table-bordered table-hover table-striped" border="1"> 
        <thead> 
            <tr> 
               <td>角色主键</td> 
               <td>角色名称</td> 
               <td>创建日期</td> 
               <td>当前状态</td> 
               <td>操作</td> 
            </tr> 
        </thead>
</div>
        <tbody> 
            <tr v-for="item in roleList" :key="item.cord"> 
                <td>{{item.cord}}</td> 
                <td>{{item.roleName}}</td> 
                <td>{{item.createTime}}</td> 
                <td>{{item.stud}}</td> 
               <td><button @click='del'>删除</button></td> 
            </tr> 
        </tbody> 
    </table> 
</div>
<script> 
     var vu=new Vue({ 
     el:'#app', 
     data:{ 
     roleList: [ 
     {cord:"200301","roleName":"管理员",createTime:"2023-4-20",stud:"可用"},
     {cord:"200302","roleName":"超级管理员",createTime:"2023-4-20",stud:"可用"} ,
     {cord:"200303","roleName":"一般用户",createTime:"2023-4-21",stud:"不可用"} ,
     ],
     cord:"" 
    },
     // vue对象创建完成后，界面加载方法 
     created(){ 
     this.getAllRole() 
     },
     methods:{ 
    
        // 列表数据绑定 
        getAllRole(){ 
            console.log("获取全部角色信息并绑定列表"); 
            this.$http.get("role.json").then(rs=>{ 
                // 当加载json数据时，需要将数据以body的形式进行获取 
                console.log(rs.body) 
                this.roleList=rs.body 
        }) 
    },
     add (){ 
         this.roleList.push({"cord":"无","roleName":"无","createTime":"无","stud":"无"}) 
},

sel(){

 },
del(){
    this.roleList.pop()
} 
} 
})
 </script> 

 <style> 

</style>